<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>
		<image :style="{top: `${search.height+search.top+10}px`}" mode="widthFix" class="assessHeardImg"
			src="/static/img/maskingIcon.png"></image>
		<view v-if="title=='食材应用菜品推荐'" class="cuisineBigBox" :style="{top: `${search.height+search.top+10+28}px`}">
			<view class="cuisineBigBoxVox" v-for="(nowItem,nowIndex) in detail" :key="nowIndex">
				<view class="cuisineBox">
					<view class="cuisineBox_heard">
						<view class="cuisineBox_heardLeft">
							<p class="cuisineBox_heardLeftP">
								<span>{{nowIndex+1}}</span>
							</p>
							<p class="cuisineBox_heardLeftP2">{{nowItem.categoryName}}</p>
							<p class="cuisineBox_heardLeftP3">{{nowItem.foodName}}</p>
							<p class="cuisineBox_heardLeftP4">
								当月在售门店：<span>{{nowItem.saleStore}}家</span>
								<!-- <span>|</span>
								{{nowItem.newStore | ff_newStore}}门店：<span>{{Math.abs(nowItem.newStore)}}家</span> -->
							</p>
							<p class="cuisineBox_heardLeftP4">
								当月在售门店变化数：<span>{{nowItem.newStore}}家</span>
							</p>

						</view>
						<view class="cuisineBox_heardRight">
							<image src="/static/img/flagIcon.png"></image>
							<p>菜品指数</p>
							<p>{{nowItem.marketIndex}}</p>
							<p>{{nowItem.trend}}</p>
						</view>
					</view>
					<view class="cuisineBox_heardTwo">
						<view class="pages_intelligenceHeard">
							<view class="pages_intelligenceHeardLeft">菜品风味</view>
						</view>
						<view class="cuisineBox_heardTwoMain">
							<span class="cuisineBox_heardTwoMainItem"
								v-for="item in ff_flavorArr(nowItem.flavor)">{{item}}</span>
						</view>
					</view>
					<view>

						<view class="foodBox">
							<view class="pages_intelligenceHeard">
								<view class="pages_intelligenceHeardLeft">所需食材</view>
							</view>
							<view class="cuisineBox_heardTwoMain">
								<span class="cuisineBox_heardTwoMainItem"
									v-for="item in ff_flavorArr(nowItem.ingredientsDesc)">{{item}}</span>
							</view>

							<view class="pages_intelligenceHeard">
								<view class="pages_intelligenceHeardLeft">烹饪手法</view>
							</view>
							<view class="cuisineBox_heardTwoMain cuisineBox_heardTwoMainlast">
								<span class="cuisineBox_heardTwoMainItem"
									v-for="item in ff_flavorArr(nowItem.content)">{{item}}</span>
							</view>
						</view>

					</view>
				</view>

				<view class="cuisinePricingBox">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">菜品定价推荐</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.priceDesc}}</view>
					<view class="cuisinePricingBox_main">
						<view class="cuisinePricingBox_mainItems" v-for="(item,index) in ff_sort(nowItem.priceList)"
							:key="index">
							<view>{{item.priceDesc}}</view>
							<view>
								<u-line-progress :showText="false" :percentage="ff_ratio(item.ratio)" height="8"
									activeColor="#FFDA2D"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<view class="cuisinePricingBox">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">推荐学习商家</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.storeDesc}}</view>
					<view class="cuisinePricingBox_mainxx">
						<view class="cuisinePricingBox_mainites" @click="goXiaoChen(item.storeId)"
							v-for="(item,index) in nowItem.storeList" :key="index">
							<view class="cuisinePricingBox_mainitesImg">
								<image mode="aspectFill"
									:src="item.coverImg ? item.coverImg : '/static/img/mrstore.png'">
								</image>
							</view>
							<view class="cuisinePricingBox_mainitesText">{{item.storeName}}</view>
						</view>
					</view>

				</view>
				<view class="cuisinePricingBox Pricinbotton">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">菜品包装概念</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.wrapDesc}}</view>
					<!-- <view class="cuisinePricingBox_mainxxBot">
						<rich-text :nodes="detail.warpContent"></rich-text>
					</view> -->
					<view class="cuisineBox_heardTwoMain cuisineBox_heardTwoMainss">
						<span class="cuisineBox_heardTwoMainItem"
							v-for="item in ff_flavorArr(nowItem.wrapContent)">{{item}}</span>
					</view>

				</view>
			</view>

			<p class="pages_end">- 章鱼小数据·版权所有 -</p>


		</view>

		<view v-else class="cuisineBigBox cuisineBigBoxCai" :style="{top: `${search.height+search.top+10+28}px`}">
			<view class="cuisineBigBoxVox" v-for="(nowItem,nowIndex) in detail" :key="nowIndex">
				<view class="cuisineBox Pricinbotton">
					<view class="cuisineBox_heard">
						<view class="cuisineBox_heardLeft">
							<p class="cuisineBox_heardLeftP2">{{nowItem.categoryName}}</p>
							<p class="cuisineBox_heardLeftP3">{{nowItem.foodName}}</p>
							<p class="cuisineBox_heardLeftP4">
								当月在售门店：<span>{{nowItem.saleStore}}家</span>
								<!-- <span>|</span>
								{{nowItem.newStore | ff_newStore}}门店：<span>{{Math.abs(nowItem.newStore)}}家</span> -->
							</p>
							<p class="cuisineBox_heardLeftP4">
								当月在售门店变化数：<span>{{nowItem.newStore}}家</span>
							</p>
						</view>
						<view class="cuisineBox_heardRight">
							<image src="/static/img/flagIcon.png"></image>
							<p>菜品指数</p>
							<p>{{nowItem.marketIndex}}</p>
							<p>{{nowItem.trend}}</p>
						</view>
					</view>
					<view class="cuisineBox_heardTwo">
						<view class="pages_intelligenceHeard">
							<view class="pages_intelligenceHeardLeft">菜品风味</view>
						</view>
						<view class="cuisineBox_heardTwoMain">
							<span class="cuisineBox_heardTwoMainItem"
								v-for="item in ff_flavorArr(nowItem.flavor)">{{item}}</span>
						</view>
					</view>
					<view>
						<view class="foodBox">
							<view class="pages_intelligenceHeard">
								<view class="pages_intelligenceHeardLeft">所需食材</view>
							</view>
							<view class="cuisineBox_heardTwoMain">
								<span class="cuisineBox_heardTwoMainItem"
									v-for="item in ff_flavorArr(nowItem.ingredientsDesc)">{{item}}</span>
							</view>

							<view class="pages_intelligenceHeard">
								<view class="pages_intelligenceHeardLeft">烹饪手法</view>
							</view>
							<view class="cuisineBox_heardTwoMain cuisineBox_heardTwoMainlast">
								<span class="cuisineBox_heardTwoMainItem"
									v-for="item in ff_flavorArr(nowItem.content)">{{item}}</span>
							</view>
						</view>

					</view>
				</view>

				<view class="cuisinePricingBox Pricinbotton">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">菜品定价推荐</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.priceDesc}}</view>
					<view class="cuisinePricingBox_main">
						<view class="cuisinePricingBox_mainItems" v-for="(item,index) in ff_sort(nowItem.priceList)"
							:key="index">
							<view>{{item.priceDesc}}</view>
							<view>
								<u-line-progress :showText="false" :percentage="ff_ratio(item.ratio)" height="8"
									activeColor="#FFDA2D"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<view class="cuisinePricingBox">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">推荐学习商家</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.storeDesc}}</view>
					<view class="cuisinePricingBox_mainxx">
						<view class="cuisinePricingBox_mainites" @click="goXiaoChen(item.storeId)"
							v-for="(item,index) in nowItem.storeList" :key="index">
							<view class="cuisinePricingBox_mainitesImg">
								<image mode="aspectFill"
									:src="item.coverImg ? item.coverImg : '/static/img/mrstore.png'">
								</image>
							</view>
							<view class="cuisinePricingBox_mainitesText">{{item.storeName}}</view>
						</view>
					</view>

				</view>
				<view class="cuisinePricingBox Pricinbotton">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">菜品包装概念</view>
					</view>
					<view class="cuisinePricingBox_mainItems_text">{{nowItem.wrapDesc}}</view>
					<!-- <view class="cuisinePricingBox_mainxxBot">
						<rich-text :nodes="detail.warpContent"></rich-text>
					</view> -->
					<view class="cuisineBox_heardTwoMain cuisineBox_heardTwoMainss">
						<span class="cuisineBox_heardTwoMainItem"
							v-for="item in ff_flavorArr(nowItem.wrapContent)">{{item}}</span>
					</view>

				</view>
			</view>

			<p class="pages_end">- 章鱼小数据·版权所有 -</p>


		</view>



		<!-- 学习的菜品 -->
		<u-overlay :show="sexShowPicker" @click="sexShowPicker = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">选择菜品款式</view>
				<image @click.stop="sexShowPicker=false" class="saleBox__HeardImg" src="/static/img/chachaIcon.png">
					<picker-view @pickstart="isChange=false" @pickend="isChange=true" :value="sexRegionIndex"
						style="width:100%;height:500rpx;" indicator-style="height:50px;" @change="sexRegionChange">
						<picker-view-column>
							<block v-for="(item,index) in studyArr" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.foodName}}</view>
							</block>
						</picker-view-column>
					</picker-view>
					<view @click.stop="pickerConfirm"
						:class="isChange ? 'saleBox__MainItem saleBox__MainItem--red' : 'saleBox__MainItem'">
						确定</view>
			</view>
		</u-overlay>

		<view class="cuisineButtonBox" v-if="studyArr.length">
			<view class="cuisineButton" @click="cuisineButton">
				<p>我想学此菜</p>
				<p>点击学习烹饪大师带来的课程，已有{{joinNum}}人参与</p>
			</view>
		</view>

	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				sexShowPicker: false,
				isChange: true,
				title: '菜品详情',
				content: ``,
				dataId: '',
				detail: null,
				flavorArr: [],
				cuisineArr: [],
				packagingArr: [],
				ingredientArr: [],
				ingredientsListArr: [],
				trend: 0,
				joinNum: 0,
				marketIndex: '',
				sexRegionIndex: [0],
				studyArr: []

			}
		},
		onLoad(oprtons) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (oprtons.dataId) {
				this.dataId = oprtons.dataId;
				this.title = oprtons.index == 1 || oprtons.index == 2 ? '菜品详情' : '食材应用菜品推荐';
			}
			this.init();
		},
		filters: {
			ff_newStore(val) {

				let nowVal = Number(val);
				console.log('nowVal', nowVal)
				return nowVal >= 0 ? '新增' : '减少';
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
		},
		methods: {
			ff_sort(arr) {
				return this.$Tools.rank(arr);
			},
			ff_ratio(val) {
				let nowVal = val * 100;
				return nowVal
			},
			sexRegionChange(e) {
				this.sexRegionIndex = e.detail.value;
			},
			ff_flavorArr(item) {
				return item.split(',');
			},
			goXiaoChen(storeId) {
				uni.navigateToMiniProgram({
					appId: 'wx734c1ad7b3562129',
					path: `pages/poi/poi?redirect_from=pages%2Fdetail%2Fdetail&shopUuid=${storeId}&utm_source=xiuxianyule`,
					success(res) {
						// 打开成功
						console.log('跳转成功---->', res)
					},
					fail(e) {
						if (e.errMsg != "navigateToMiniProgram:fail cancel") {
							uni.showToast({
								title: '该商家已下架',
								icon: "none",
								mask: true
							})
						}

						console.log('跳转成功---->', e)

					}
				});
			},
			pickerConfirm() {
				uni.navigateTo({
					url: `/package/study/index?studyId=${this.studyArr[this.sexRegionIndex[0]].study.studyId}&buyType=40`
				})
			},
			cuisineButton() {
				this.sexShowPicker = true;
				this.sexRegionIndex = [0];

			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			init() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.analysisFoodGetDesc({
					dataId: this.dataId
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						this.detail = res.data;
						this.detail.forEach((item, index) => {
							if (item.studyStatus) {
								this.joinNum++;
								this.studyArr.push(item);
							}
						})

						// this.flavorArr = this.detail.flavor.split(',');
						// this.cuisineArr = this.detail.content.split(',');
						// this.packagingArr = this.detail.wrapContent.split(','); 
						// this.ingredientsListArr = this.detail.ingredientsDesc.split(','); 
					}
				})
			},
			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		height: 100vh;
		box-sizing: border-box;
		overflow: scroll;
		position: relative;


		.cuisineBox_heardTwo {
			padding-top: 16rpx;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #FFDA2D;
			color: #333;
			box-shadow: 0 28rpx 22rpx -26rpx #FFDA2D;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}

		}

		.cuisineButtonBox {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 168rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
		}

		.Pricinbotton {
			padding-bottom: 10rpx !important;
		}

		.cuisinePricingBox {
			// padding: 24rpx;
			padding-bottom: 0;
			// border-radius: 24rpx;
			background: #fff;
			padding: 24rpx 0;
			border-top: 2rpx solid #E8E8E8;
		}

		.cuisinePricingBox_mainxx {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 8rpx;
			// padding-bottom: 24rpx;
		}

		.pages_end {
			padding: 24rpx 0 60rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #CCCCCC;
		}

		.cuisineButton {
			width: 556rpx;
			height: 88rpx;
			padding: 10rpx;
			box-sizing: border-box;
			background: #FFDA2D;
			opacity: 1;
			border-radius: 12px;

			p {
				text-align: center;
			}

			p:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
			}

			p:nth-child(2) {
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 28rpx;
				color: #666666;
			}
		}

		.cuisinePricingBox_mainxxBot {
			padding-top: 24rpx;
		}

		.cuisinePricingBox_mainItems_text {
			margin-top: 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
		}

		.cuisinePricingBox_mainitesText {
			// height: 38rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 38rpx;
			color: #000000;
			text-align: left;
			flex: 1;
			// text-overflow: ellipsis;
			// overflow: hidden;
			// word-spacing: normal;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin: 0 25rpx 0 25rpx;
		}

		.cuisinePricingBox_mainitesImg {
			width: 122rpx;
			height: 122rpx;
			border-radius: 24rpx;
			overflow: hidden;
			padding: 6rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// priceId=8&masterId=140

		.cuisinePricingBox_mainites {
			display: inline-block;
			width: 310rpx;
			height: 122rpx;
			display: flex;
			background: #FFDA2D;
			border-radius: 24rpx;
			align-items: center;
			margin-top: 16rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}

		.cuisineBox_heardTwoMain {
			margin-top: 16rpx;
			margin-bottom: 10rpx;

			span {
				display: inline-block;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				padding: 0 12rpx;
				border-radius: 10rpx;
				background-color: #FFDA2D;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;

			}
		}

		.cuisineBox_heardTwoMainss {
			margin-bottom: 0rpx;
		}

		.cuisineBox_heardTwoMainlast {
			margin-bottom: 0;
		}

		.cuisinePricingBox_mainItems {
			display: flex;

			view:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				width: 110rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
			}

			view:nth-child(2) {
				flex: 1;
				height: 34rpx;
				display: flex;
				align-items: center;
			}

		}

		.foodBox {
			// margin-top: 16rpx;
			padding-bottom: 15rpx;
		}

		.foodItem {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #ddd;
			padding: 24rpx 0 10rpx;

			span {
				display: inline-block;
			}

			span:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 34rpx;
				color: #000000;
			}

			span:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #666666;
			}

		}

		.pages_intelligenceHeard {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
		}

		.cuisinePricingBox_main {
			margin-top: 20rpx;
		}

		.pages_intelligenceHeardLeft {
			// border-left: 8rpx solid #FFDA2D;
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
			position: relative;
			padding-left: 16rpx;

			&::after {
				content: "";
				width: 8rpx;
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFDA2D;

			}
		}

		.assessHeardImg {
			position: absolute;
			width: 100%;
		}

		.cuisineBigBoxVox {
			background: #fff;
			padding: 24rpx;
			border-radius: 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			padding-bottom: 0;

		}


		.cuisineBigBox {
			width: 686rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			padding-bottom: 168rpx;
		}

		.cuisineBox {
			border-radius: 24rpx;
			// width: 686rpx;

			background-color: #fff;
			// padding: 24rpx;
			box-sizing: border-box;

		}

		.cuisineBox_heard {
			display: flex;
			border-bottom: 2rpx solid #E8E8E8;

			padding-bottom: 12rpx;
		}

		.cuisineBox_heardLeft {
			flex: 1;
			// padding-bottom: 24rpx;
			margin-right: 48rpx;

			.cuisineBox_heardLeftP {
				height: 60rpx;
				position: relative;

				margin-bottom: 20rpx;

				span {
					width: 80rpx;
					display: inline-block;
					height: 60rpx;
					line-height: 60rpx;
					position: absolute;
					left: -28rpx;
					border-radius: 0 12rpx 12rpx 0;
					background: linear-gradient(90deg, #ffc400, #ffd829);
					font-size: 38rpx;
					font-family: DIN;
					font-weight: bold;
					text-align: center;
				}
			}

			.cuisineBox_heardLeftP2 {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
			}

			.cuisineBox_heardLeftP3 {
				height: 56rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 56rpx;
				color: #333333;
				margin: 8rpx 0 16rpx;
			}

			.cuisineBox_heardLeftP4 {
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36rpx;
				color: #666;

				span {
					display: inline-block;
					color: #333;
					font-weight: 550;
				}

				span:nth-child(2) {
					color: #ccc;
					margin: 0 15rpx;
					font-weight: 100;
				}
			}
		}

		.foodItemBo {
			border: none;
		}

		.cuisineBox_heardRight {
			flex: 0 0 144rpx;
			width: 144rpx;
			height: 204rpx;
			padding: 14rpx 0;
			box-sizing: border-box;
			position: relative;
			transform: translateY(0rpx);
			border-radius: 12rpx 12rpx 0 0;
			overflow: hidden;

			p:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				text-align: center;
			}

			p:nth-child(3) {
				text-align: center;
				height: 62rpx;
				font-size: 52rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 62rpx;
				color: #333333;
				// margin: 2rpx 0;
				margin-bottom: 5rpx;
			}

			p:nth-child(4) {
				// height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 30rpx;
				color: #333333;
				text-align: center;
				width: 100%;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
				padding: 0 15rpx;
				box-sizing: border-box;
			}

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}
		}

		.cuisineBigBoxCai {
			.cuisineBox_heardRight {
				transform: translateY(-24rpx);
				border-radius: 0;
			}

			.cuisineBigBoxVox {
				background: transparent;
				padding: 0;
			}

			.cuisineBox {
				padding: 24rpx;
				margin-bottom: 24rpx;
			}

			.foodBox {
				padding-bottom: 0;
			}

			.cuisinePricingBox {
				padding-bottom: 0;
				background: #fff;
				padding: 24rpx;
				border-top: 2rpx solid #E8E8E8;
				margin-bottom: 24rpx;
				border-radius: 24rpx;
			}
		}
	}
</style>
